<script>
  import "@/assets/common/base.css"
  import leftBar from '@/components/leftBar';
  import topHeader from '@/components/topHeader';
  import chooseDate from '@/components/chooseDate';
  import chooseShopDailog from '@/components/chooseShopDailog';
  import billPanel from '@/components/billPanel';
  import traidingList from '@/components/traidingList';
  import listNav from '@/components/listNav';
  import uploadBill from '@/components/uploadBill';
  import pager from '@/components/pager';

  import { basicDataTest,shopDataTest,themeDataTest,dateDataTest,listDataTest,themeListDataTest,listNavData,traidingData} from "@/common/data.js";
  const { Fetch } = require("@/common/fetch");
  const _dev_ = false;
  const basicData = Fetch('/admin/finance/api/page.php?action=get_base');
  const shopData = Fetch('/admin/finance/api/page.php?action=get_shop');
  export default {
    name: "Traiding",
    components:{leftBar,topHeader,chooseDate,chooseShopDailog,billPanel,traidingList,listNav,uploadBill,pager},
    data(){
      return{
        switchShopVisible:false,
        left_menu:_dev_ ? basicDataTest.left_menu : [],//左侧导航数据
        topHeader:_dev_ ? basicDataTest.user : {},     //用户信息
        listNavData:listNavData,
        billData:false,
        tradingBillList:_dev_ ? traidingData:[],
        total:0,
        shops:_dev_? shopDataTest:[],
        currentData:{
          shop_name:'全部门店',
          shop_id:'',
          state:'',
          pay_type:'',
          page:1,
          page_num:10
        }
      }
    },
    methods:{
      handleChooseShop() {
        this.switchShopVisible = true;
      },
      closeChooseShop(){
        this.switchShopVisible = false;
      },
      handleShopChange(row){
        this.currentData = {...this.currentData,...row};
        this.switchShopVisible = false;
      },
      searchList(opt){
        const self  = this;
        const dateOpt = this.$refs['date'].getDate();
        if(!dateOpt){
          this.$message('请选择至少一个有效日期');
          return;
        }
        const {start,end} = this.$refs['date'].getDate();
        this.currentData = {...this.currentData,...opt}
        const {shop_id,state,page,page_num} = this.currentData;
        const billListData = Fetch(`/admin/finance/api/transaction_report.php?action=get_transaction&start_date=${start}&end_date=${end}&shop_id=${shop_id}&channel=lehui&state=${state}&page=${page}&page_num=${page_num}`)
        billListData.then((res)=>{
          if(res && res.data){
            let {origin,commission,money,refund} =  res.data;
            self.billData = {
              origin,
              commission,
              money,
              refund
            };
            console.log(self.billData);
            self.tradingBillList = res.data.list || [];
            self.total = res.data.count;
          }
        })
      },
      uploadTraidBill(){
        const dateOpt = this.$refs['date'].getDate();
        if(!dateOpt){
          this.$message('请选择至少一个有效日期');
          return;
        }
        const {start,end} = dateOpt;
        let {shop_id} = this.currentData;
        window.open(`/admin/finance/api/transaction_report.php?action=get_transaction&start_date=${start}&end_date=${end}&shop_id=${shop_id}&channel=lehui&download=1`);
      }
    },
    mounted(){
      basicData.then((response)=>{
        const {left_menu,user}  = response.data;
        this.left_menu = left_menu;
        this.topHeader= user;
      });
      shopData.then((response)=>{
        const {data} = response;
        this.shops = data;
        if(data.length){
          this.currentData = {...this.currentData,...data[0]};
        }
      });
    }

  }
</script>

<template>
  <div id="traiding">
    <el-container>
      <el-aside width="170px">
        <leftBar :parcel="left_menu"/>
      </el-aside>

      <el-container>
        <el-header height="80px">
          <topHeader :parcel="topHeader"/>
        </el-header>
        <el-main class="m-container">
          <h2 class="title">{{currentData.shop_name}}</h2>
          <div class="m-btn" @click="handleChooseShop"> <i class="el-icon-refresh"></i>更换门店</div>
          <chooseDate ref="date"></chooseDate>
          <div class="m-btn" @click="searchList"> <i class="el-icon-search"></i>查询</div>
          <div v-if="billData">
          <billPanel :parcel="billData"  :isTraiding="true" ></billPanel>
          <div class="m-button">
            <div class="m-btn" @click="uploadTraidBill">导出报表</div>
          </div>
          <div class="m-panel" >
            <listNav :parcel="listNavData.tradeNav" keyName="state" @upload="searchList"></listNav>
            <traidingList :parcel="tradingBillList" @upload="searchList" :total="total"></traidingList>
          </div>
          </div>
        </el-main>
      </el-container>
      <chooseShopDailog :shops="shops" :currentShop="currentData.shop_id" :switchShopVisible="switchShopVisible" @closeChooseShop="closeChooseShop" @upload="handleShopChange"/>
    </el-container>
  </div>
</template>

<style scoped  lang = "scss">
  #traiding {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F2F2F2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
  }
  .el-main{padding:30px}
  .el-header{padding:0;}

  .m-container{
    .title {
      font-family: PingFangSC-Medium;
      font-size: 20px;
      color: #000000;
      letter-spacing: 0;
      display: inline-block;
      margin: 10px 0 27px;
      line-height: 1;
    }
    .m-btn{
      display: inline-block;
      background: #FFED8C;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      letter-spacing: 0;
      border-radius: 100px;
      padding:5px 10px;
      cursor: pointer;
      margin:0 20px
    }
    .m-button{
      text-align: center;
      .m-btn{
        display: inline-block;
        padding:5px 30px;
        background: #FF679E;
        border-radius: 101px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 28px;
        margin:30px 10px;
      }
    }
    .m-panel{
      background: #FFFFFF;
      box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);
      padding:20px;
    }
  }

</style>
